/**
 * Created by jean.h.ma on 11/04/2018.
 */

import React from 'react'
import Base from '@codefree/badger/app/components/Base'
import Master from '../../components/Master'

export default class TODO extends Base {
	constructor(props) {
		super(props);
		this.state = {
			text: "",
			todos: []
		};
	}

	render() {
		return (
			<Master>
				<h6>Example TODO</h6>
				<div>
					<input type="text" value={this.state.text} onChange={({target: {value}}) => {
						this.updateState({
							text: {$set: value}
						});
						//this.setState()
					}} onKeyDown={(event) => {
						if (event.keyCode === 13) {
							const value = this.state.text;
							this.updateState({
								todos: {$push: [value]},
								text: {$set: ""}
							});
						}
					}}/>
				</div>
				<div>
					<ul>
						{this.state.todos.map((todo, index) => {
							return (
								<li key={index}>
									<a href="javascript:void(0)" onClick={()=>{
										this.updateState({
											todos:{$splice:[[index,1]]}
										})
									}}>DONE</a>  {todo}</li>
							);
						})}
					</ul>
				</div>
			</Master>
		);
	}
}